<template>
  <div class="body1">
    <div class="body2" id="pdfDom">
      <!-- 第一个 -->
      <div class="model-style">
        <!-- 边框 -->
        <div class="border-style">
          <img src="../../assets/top.png" class="top1">
          <img src="../../assets/xkzLogo.png" class="topLogo">
          <img src="../../assets/top.png" class="top2">
          <img src="../../assets/left.png" class="left">
          <img src="../../assets/left.png" class="right">
          <img src="../../assets/last.png" class="last">
        </div>
        <div class="content-div">
          <div class="title-style">
            {{ licenceName }}
            <img v-if="form.qrCodePath" :src="form.qrCodePath" alt=""
              style="position: absolute;top: 0px;left: 10px;width: 80px;height: 80px;">
          </div>

          <div class="serial-number-style">
            <div style="float: left;">
              <span>编号：</span>
            </div>
            <div style="display: inline-block; width: 100px;">
              {{ form.boothId }}
            </div>
          </div>
          <div class="image-info-style">
            <div>
              <label for="avatarUpload" class="avatar-upload">
                <img v-if="form.fileUrl" :src="form.fileUrl" alt="" class="avatar-preview">
                <span v-if="!form.fileUrl">头像</span>
              </label>
            </div>
            <div>
              <div><br></div>
              <div>
                <div style="float: left;">
                  <span>经营户姓名：</span>
                </div>
                <div style="display: inline-block; width: 130px;">
                  {{ form.boothName }}
                </div>
              </div>
              <div><br></div>
              <div>
                <div style="float: left;">
                  <span>&nbsp;&nbsp;经营地点：</span>
                </div>
                <div style="display: inline-block; width: 130px;">
                  {{ form.boothAddress }}
                </div>
              </div>
            </div>
            <div>
              <div><br></div>
              <div>
                <div style="float: left;">
                  <span>占道面积：</span>
                </div>
                <div style="display: inline-block; width: 130px;">
                  {{ form.occupiedArea }}
                </div>
              </div>
              <div><br></div>
              <div>
                <div style="float: left;">
                  <span>经营品种：</span>
                </div>
                <div style="display: inline-block; width: 130px;">
                  {{ form.boothType }}
                </div>
              </div>
            </div>
          </div>

          <!-- 出摊时间 -->
          <div class="selling-time-style">
            <div>
              <span>出摊时间</span>
            </div>
            <div>
              <div>夏、秋季</div>
              <div>(5月-10月)</div>
              <div><br></div>
              <div>冬、春季</div>
              <div>(11月-次年4月)</div>
            </div>
            <div>
              <div>
                <span>上午：</span>
                {{ form.sumMornStart ? form.sumMornStart : '/' }}
                <span>时至</span>
                {{ form.sumMornEnd ? form.sumMornEnd : '/' }}
                <span>时止；下午</span>
                {{ form.sumAfterStart ? form.sumAfterStart : '/' }}
                <span>时至</span>
                {{ form.sumAfterEnd ? form.sumAfterEnd : '/' }}
                <span>时止。</span>
              </div>
              <div><br></div>
              <div><br></div>
              <div>
                <span>上午：</span>
                {{ form.sprMornStart ? form.sprMornStart : '/' }}
                <span>时至</span>
                {{ form.sprMornEnd ? form.sprMornEnd : '/' }}
                <span>时止；下午</span>
                {{ form.sprAfterStart ? form.sprAfterStart : '/' }}
                <span>时至</span>
                {{ form.sprAfterEnd ? form.sprAfterEnd : '/' }}
                <span>时止。</span>
              </div>
            </div>
          </div>
          <!-- 日期 -->
          <div class="date-style">
            <div>
              <span>有效期：</span>
              {{ form.validityDate }}
              <span>止</span>
            </div>
            <div>
              <span>发证日期：</span>
              {{ form.issueDate }}
            </div>
          </div>
        </div>
        <div class="foot-text-div">
          {{ licenceMakeName }}
        </div>
      </div>
      <!-- 第二个 -->
      <div class="model-style2">
        <!-- 边框 -->
        <div class="border-style">
          <img src="../../assets/top.png" class="top1">
          <img src="../../assets/xkzLogo.png" class="topLogo">
          <img src="../../assets/top.png" class="top2">
          <img src="../../assets/left.png" class="left">
          <img src="../../assets/left.png" class="right">
          <img src="../../assets/last.png" class="last">
        </div>
        <div class="content-div">
          <div class="title-style">
            {{ licenceName }}
            <img v-if="form.qrCodePath" :src="form.qrCodePath" alt=""
              style="position: absolute;top: 0px;left: 10px;width: 80px;height: 80px;">
          </div>
          <div class="serial-number-style">
            <div style="float: left;">
              <span>编号：</span>
            </div>
            <div style="display: inline-block; width: 100px;">
              {{ form.boothId }}
            </div>
          </div>
          <div class="image-info-style">
            <div>
              <label for="avatarUpload" class="avatar-upload">
                <img v-if="form.fileUrl" :src="form.fileUrl" alt="" class="avatar-preview">
                <span v-if="!form.fileUrl">头像</span>
              </label>
            </div>
            <div>
              <div><br></div>
              <div>
                <div style="float: left;">
                  <span>经营户姓名：</span>
                </div>
                <div style="display: inline-block; width: 130px;">
                  {{ form.boothName }}
                </div>
              </div>
              <div><br></div>
              <div>
                <div style="float: left;">
                  <span>&nbsp;&nbsp;经营地点：</span>
                </div>
                <div style="display: inline-block; width: 130px;">
                  {{ form.boothAddress }}
                </div>
              </div>
            </div>
            <div>
              <div><br></div>
              <div>
                <div style="float: left;">
                  <span>占道面积：</span>
                </div>
                <div style="display: inline-block; width: 130px;">
                  {{ form.occupiedArea }}
                </div>
              </div>
              <div><br></div>
              <div>
                <div style="float: left;">
                  <span>经营品种：</span>
                </div>
                <div style="display: inline-block; width: 130px;">
                  {{ form.boothType }}
                </div>
              </div>
            </div>
          </div>

          <!-- 出摊时间 -->
          <div class="selling-time-style">
            <div>
              <span>出摊时间</span>
            </div>
            <div>
              <div>夏、秋季</div>
              <div>(5月-10月)</div>
              <div><br></div>
              <div>冬、春季</div>
              <div>(11月-次年4月)</div>
            </div>
            <div>
              <div>
                <span>上午：</span>
                {{ form.sumMornStart ? form.sumMornStart : '/' }}
                <span>时至</span>
                {{ form.sumMornEnd ? form.sumMornEnd : '/' }}
                <span>时止；下午</span>
                {{ form.sumAfterStart ? form.sumAfterStart : '/' }}
                <span>时至</span>
                {{ form.sumAfterEnd ? form.sumAfterEnd : '/' }}
                <span>时止。</span>
              </div>
              <div><br></div>
              <div><br></div>
              <div>
                <span>上午：</span>
                {{ form.sprMornStart ? form.sprMornStart : '/' }}
                <span>时至</span>
                {{ form.sprMornEnd ? form.sprMornEnd : '/' }}
                <span>时止；下午</span>
                {{ form.sprAfterStart ? form.sprAfterStart : '/' }}
                <span>时至</span>
                {{ form.sprAfterEnd ? form.sprAfterEnd : '/' }}
                <span>时止。</span>
              </div>
            </div>
          </div>
          <!-- 日期 -->
          <div class="date-style">
            <div>
              <span>有效期：</span>
              {{ form.validityDate }}
              <span>止</span>
            </div>
            <div>
              <span>发证日期：</span>
              {{ form.issueDate }}
            </div>
          </div>
        </div>
        <div class="foot-text-div">
          {{ licenceMakeName }}
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import axios from "axios";
import { licenceName, licenceMakeName } from "../../utils/publicName.js"
export default {
  name: "202406251026",

  data() {
    return {
      licenceName: licenceName,
      licenceMakeName: licenceMakeName,
      createdGeneratePDF: false,
      form: {
        id: '',
        boothId: '', //许可证编号
        boothName: '', // 经营户姓名
        phone: '',  // 手机号
        occupiedArea: '', // 占道面积
        boothAddress: '', // 经营地点
        boothType: '', // 经营种类
        fileUrl: '', // 头像文件路径
        sumMornStart: '', // 夏秋上午开始时间
        sumMornEnd: '', // 夏秋上午结束时间
        sumAfterStart: '', // 夏秋下午开始时间
        sumAfterEnd: '', // 夏秋下午结束时间
        sprMornStart: '', // 春冬上午开始时间
        sprMornEnd: '', // 春冬上午结束时间
        sprAfterStart: '', // 春冬下午开始时间
        sprAfterEnd: '', // 春冬下午结束时间
        createTime: '', // 创建时间
        validityDate: '', // 有效期
        issueDate: '', // 发证日期
        qrCodePath: '', // 二维码
      },
    }
  },
  created() {
    window.parent.getTemplateData((data) => {
      data.qrCodePath = data.qrCodePath + '?t=' + new Date().getTime();
      data.fileUrl = data.fileUrl + '?t=' + new Date().getTime();
      this.form = data;
      if (data.createdGeneratePDF) {
        this.createdGeneratePDF = true;
        this.postForm();
      }
    })
    window.postForm = () => {
      this.postForm();
    }
  },
  methods: {
    // 保存
    postForm() {
      this.savePDF()
        .then((blob) => {
          // 创建FormData并添加文件
          const formData = new FormData();
          formData.append('file', blob, '临时摊位许可证.pdf');

          window.parent.closeAddItem(formData);
        }).catch(error => {
          window.parent.closeAddItem('');
          console.error('整个保存PDF出错:', error);
        });
    },
    savePDF() {
      this.isPdfExport = true; // 激活PDF样式
      return new Promise((resolve, reject) => {
        this.$nextTick(() => {
          import('html2pdf.js').then((module) => {
            const html2pdf = module.default;

            // 配置选项
            const opt = {
              margin: 0,
              image: {
                type: 'jpeg',
                quality: 0.98
              },
              html2canvas: {
                scale: 2,
                logging: false,
                useCORS: true
              },
              jsPDF: {
                unit: 'mm',
                format: 'a4',
                orientation: 'portrait'
              }
            };

            const element = document.getElementById('pdfDom');

            // 生成PDF Blob对象
            html2pdf()
              .set(opt)
              .from(element)
              .toPdf()
              .get('pdf')
              .then((pdf) => {
                const blob = pdf.output('blob');

                resolve(blob); // 返回Blob对象
              }).catch((error) => {
                reject(error);
              }).finally(() => {

              });
          }).catch((error) => {
            reject(error);
            
            
          });
        });
      });
    },
  },
}
</script>

<style scoped>
:deep(.el-button-print .el-button) {
  display: inline-flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  width: auto;
  min-width: 100px;
  height: auto;
  padding: 8px 15px;
  background: #fff !important;
  color: #000 !important;
  border: none;
}


.model-style {
  position: relative;
}

.model-style2 {
  position: relative;
  top: 500px;
}

.content-div {
  position: absolute;
  font-family: '黑体', serif;
  font-size: 13px;
  top: 55px;
  left: 15px;
  width: 590px;
  height: 310px;
}

/* 标题 */
.title-style {
  margin-top: 30px;
  width: 590px;
  text-align: center;
  font-size: 35px;
  font-family: '黑体', serif;
  color: #e0ab35;
  letter-spacing: 5px;
}

/* 底部文字 */
.foot-text-div {
  position: absolute;
  top: 390px;
  right: 20px;
  text-align: center;
  font-family: '黑体', serif;
  font-weight: 500;
  font-size: 16px;
}


/* 输入框样式 */
.licence-input-style {
  border: none;
  border-radius: 0;
  font-family: "黑体", serif;
  font-size: 13px;
  padding: 0;
  outline: none;
  word-break: break-all;
}

:deep(.licence-input-style .el-textarea__inner) {
  box-shadow: 0 0 0 0;
  color: black;
  padding: 0;
  font-family: "黑体", serif;
  font-size: 13px;
  overflow-y: hidden !important;
  min-height: 13px;
  line-height: 13px;
  resize: none !important;
}


/* 时间输入框样式 */
.date-style .licence-input-style,
.selling-time-style .licence-input-style {
  text-align: center;
}

/* 编号样式 */
.serial-number-style {
  position: absolute;
  top: 75px;
  right: 20px
}

/* 个人信息 */
.image-info-style {
  display: flex;
  margin: 20px 0px 0px 50px;
  width: 540px;
}

.image-info-style>div:nth-child(1) {
  width: 80px;
}

.image-info-style>div:nth-child(2) {
  width: 230px;
  flex-direction: column;
  display: flex;
  align-items: left;
}

.image-info-style>div:nth-child(3) {
  width: 230px;
  flex-direction: column;
  display: flex;
  align-items: left;
}

.avatar-upload {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 65px;
  height: 80px;
  border: 1px solid #000;
  cursor: pointer;
  user-select: none;
}

.avatar-preview {
  width: 100%;
  height: 100%;
  object-fit: cover;
}


/* 出摊时间 */
.selling-time-style {
  display: flex;
  width: 500px;
  margin-left: 50px;
  margin-top: 10px;
}

.selling-time-style>div:nth-child(1) {
  width: 60px;
  text-align: left;
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
  padding-right: 8px;
}

.selling-time-style>div:nth-child(2) {
  width: 100px;
  flex-direction: column;
  display: flex;
  align-items: center;
  justify-content: center;
}

.selling-time-style>div:nth-child(3) {
  width: 340px;
  flex-direction: column;
  display: flex;
  align-items: center;
}

/* 日期 */
.date-style {
  display: flex;
  width: 500px;
  margin-left: 50px;
  margin-top: 10px;
}

.date-style>div:nth-child(1) {
  width: 250px;
  flex-direction: row;
  display: flex;
  align-items: center;
}

.date-style>div:nth-child(2) {
  width: 250px;
  flex-direction: row;
  display: flex;
  align-items: center;
}



/* 边框样式 */
.border-style .top1 {
  position: absolute;
  top: 35px;
  left: 0;
  width: 260px;
}

.border-style .topLogo {
  position: absolute;
  top: 0;
  left: 265px;
  width: 90px;
}

.border-style .top2 {
  position: absolute;
  top: 35px;
  right: 0;
  width: 260px;
}

.border-style .left {
  position: absolute;
  width: 13px;
  top: 47px;
  left: 0px;
}

.border-style .right {
  position: absolute;
  width: 13px;
  top: 47px;
  right: 0;
}

.border-style .last {
  position: absolute;
  width: 620px;
  top: 368px;
}
</style>
